<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        list-style: none;
    }

    ul {
        width: 300px;
    }

    li {
        position: relative;
        margin-top: 20px;
    }

    li>a {
        position: absolute;
        right: 0;
    }
</style>

<body>
    姓名：<input type="text" name="" id="text1">
    成绩：<input type="text" name="" id="text2">
    <!-- 点击 -->
    <input type="button" value="提交" class="ipt1">
    <input type="button" value="排序" class="ipt2">
    <!-- 主体内容 -->
    <div>
        <ul class="container"></ul>
    </div>
</body>
<script>
    // 姓名
    let ipt1 = document.querySelector('.ipt1')
    // 成绩
    let ipt2 = document.querySelector('.ipt2')
    // 输入姓名
    let text1 = document.querySelector('#text1')
    // 输入成绩
    let text2 = document.querySelector('#text2')
    //  插入文本框
    let container = document.querySelector('.container')



    // 点击提交
    ipt1.addEventListener('click', () => {
        if (text1.value !== '' && text2.value !== '') {
            container.innerHTML += `<li class="li">${text1.value ? text1.value : '未输入姓名'}:<span>${text2.value ? text2.value + '分' : '未输入成绩'}</span><a href="javascript:;" class="a">删除</a></li>`
        } else {
            alert('未输入姓名或成绩')
        }
        text1.value = ''
        text2.value = ''
        let a = document.querySelectorAll('.a')
        a.forEach(item => {
            item.addEventListener('click', () => {
                item.parentNode.remove()
            })
        })
    })
    // 排序
    let arr = []
    ipt2.addEventListener('click', () => {
        let str = /\d+/g
        let obj = {
            cj:text2.value
        }
        arr.push(obj)
        console.log(arr);
        // let result = document.querySelectorAll('.container li span')
        // result.forEach(item => {
        //     // 获取分数的父节点 item.parentNode
        //     let fen = item.innerHTML.match(str)
        //     let arr = [...fen, ...fen]
        //     console.log(arr);
        // })
    })
</script>

</html>